<!DOCTYPE html>
<html lang="en">
<include file="./Application/Home/View/Layout/head.html" />

        <link href="__PUBLIC__/assets/bootstrap/css/select2.css" rel="stylesheet" />
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">
        <style type="text/css">
        .loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
	display:none;
 }
 .loadEffect span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
    0%{
       opacity: 1;
    }
    100%{
       opacity: 0.2;
    }
 }
 .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
 }
 .loadEffect span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
 }
 .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
 }
 .loadEffect span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
 }
 .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
 }
 .loadEffect span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
 }
 .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
 }
	 .Alertmessage{
		text-align: center;
	    color: red;
	 }
  </style>

    <body>
        <block name="header">
           <include file="block/header"/>
        </block>
        <section>
            <div class="mainwrapper">
			   <block name="left">
			   <include file="block/left" />
               </block>

                <div class="mainpanel">
                    <div class="contentpanel">

                        <div class="panel panel-title-head">
                         <div class="search_banner">
                                <div>
	                                <!-- <div class="pull-left col-md-1">
	                                    <h4 class="panel-title">录音查询</h4>
	                                </div> -->
	                                <div class="pull-left" style="width: 175px;">
	                                <div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">名称：<input id="name" placeholder="请输入名称" style="width:100px" type="text" value="" /></lable><br>
		                             </div>

	                                </div>
	                                <div class="pull-left" style="width: 175px;">
	                                 	<div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">号码：<input id="phone" placeholder="请输入号码" style="width:100px" type="text" value="" /></lable>
	                                 </div>
	                                </div>
	                               <div class="pull-left" style="width: 250px;">
	                                 	<div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">地区/单位：<input id="keyword" placeholder="请输入地区/单位 搜索" style="width:150px" type="text" value="" /></lable>
	                                 </div>


	                                </div>
									<div class="pull-left" style="width: 35px;">
										<button class="btn btn-info btn-large search">搜索</button>
									</div>
	                                <div class="pull-right col-md-6" style="text-align:right">

											<a href="./phoneBookAdd" class="btn btn-info btn-large">添加联系人</a>
											<button class="btn btn-danger btn-large" onclick="del()">删除联系人</button>
											<button class="btn btn-warning btn-large downloadPhone">导出号簿</button>
											<!--<button class="btn btn-warning btn-large downloadVCardPhone">导出VCard号簿</button>-->
											<button class="btn btn-success btn-large" onclick="add()">批量导入</button>
											<!-- <button class="btn btn-primary btn-large tongbuPhone">同步电话簿</button> -->

	                                </div>
                                </div>
                                <div style="clear:both"></div>
                            </div><!-- panel-heading -->
                            <table id="basicTable" class="table table-striped table-bordered responsive">
                                <thead class="">
                                    <tr>
                                        <td><input type="checkbox" id="checked_all"></td>
                                        <th>名称</th>
                                        <!--<th>地区</th>
                                        <th>单位</th>-->
                                        <th>分组</th>
                                        <th>电话号码</th>
                                        <th>备注信息</th>
                                        <th>操作</th>

                                    </tr>
                                </thead>

                                <tbody>
                                  <!-- <tr role="row" class="odd"><td>1</td><td>admin</td><td class="sorting_1">男</td><td>市场</td><td>8632</td><td>8632</td><td>8632</td><td>备注</td><td><a href="./phoneBookEdit">编辑</a>|删除</td></tr> -->
                                </tbody>
                            </table>
                        </div><!-- panel -->




                        </div><!-- panel -->


                    </div><!-- contentpanel -->
                </div><!-- mainpanel --><!-- mainpanel -->
            </div><!-- mainwrapper -->

         <!-- 告警模态框 -->
		<div class="modal fade" id="alertModel" tabindex="-1" role="dialog" aria-labelledby="myAlert">
		  <div class="modal-dialog" role="document" style="width:450px">
		    <div class="modal-content" >
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
		      </div>
		      <div class="modal-body">
		        <div class="inner">
		        	<h4 class="Alertmessage"> </h4>
		        </div>
		        <div class="loadEffect">
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				</div>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary sureDel" data-dismiss="modal">确定</button>
		      </div>
		    </div>
		  </div>
		</div>

		 <div class="modal fade" id="alertModel2" tabindex="-1" role="dialog" aria-labelledby="myAlert">
		  <div class="modal-dialog" role="document" style="width:450px">
		    <div class="modal-content" >
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
		      </div>
		      <div class="modal-body">
		        <div class="inner">
		        	<h4 class="Alertmessage"> </h4>
		        </div>
		        <div class="loadEffect">
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				     <span></span>
				</div>
		      </div>
		      <div class="modal-footer">
		       <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>
        </section>


        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.datatables.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/custom.js"></script>



<script type="text/javascript">
var CHANNEL_TB;
$(document).ready( function () {
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
	CHANNEL_TB =$('#basicTable').dataTable(
	        {
	            "ajax": {  //类似jquery的ajax参数，基本都可以用。
	                "type": "post",  //后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
	                "url": '../account/phoneBook',
	                "dataSrc": "data",  //默认data，也可以写其他的，格式化table的时候取里面的数据
	                "data": function (d) {  //d 是原始的发送给服务器的数据，默认很长。
	                	d.sName=$('#name').val();
	                	d.sNum=$('#phone').val();
	                	d.keyword =$("#keyword").val();
	                }
	            },

	            "pagingType": "full_numbers",
	            //"sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）
	            "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充
	            "iDisplayLength": 10,  //每页显示10条数据
	            "bAutoWidth": false,  //宽度是否自动，感觉不好使的时候关掉试试
	            "bLengthChange": false,
	            "bFilter": false,
	            "oLanguage": {  //下面是一些汉语翻译
	                "sSearch": "搜索",
	                "sLengthMenu": "每页显示 _MENU_ 条记录",
	                "sZeroRecords": "没有检索到数据",
	                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条",
	                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
	                "sInfoEmtpy": "没有数据",
	                "sProcessing": "正在加载数据...",
	                "oPaginate":
	                        {
	                            "sFirst": "首页",
	                            "sPrevious": "前一页",
	                            "sNext": "后一页",
	                            "sLast": "末页"
	                        }
	            },
	            "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
	            "bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
//	            "sAjaxSource": '__URL__/serach_nasty', //给服务器发请求的url
	            "aoColumns": [  //这个属性下的设置会应用到所有列，按顺序没有是空
	                {"mData": function (mData)
	              	   {
	                      return "<input type='checkbox' class='checked_per_pro' name='checked_per_pro'  value='"+mData.pid+"' />";
	                     }
	              	},
	                {"mData": 'contactname'},
	                {"mData": 'deptname'},
	                {"mData": 'phones'},
	                {"mData": 'remark'},

	                {"mData":function(mData){
	                	return "<a href='./phoneBookEdit/id/"+mData.pid+"'>编辑</a>";
	                 }
	               }

	            ],

	            "aoColumnDefs": [//和aoColums类似，但他可以给指定列附近属性
	                {"bSortable": false, "aTargets": [0,1, 3]}, //这句话意思是第1,3,6,7,8,9列（从0开始算） 不能排序
	                {"bSearchable": false, "aTargets": [ 2, 3]} //bSearchable 这个属性表示是否可以全局搜索，其实在服务器端分页中是没用的
	            ],
	            "aaSorting": [[2, "desc"]], //默认排序
	            "fnInitComplete": function (oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略
	                $("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名");
	            }

	        });
})

$('.search').click(function(){
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
    CHANNEL_TB.fnClearTable();
    CHANNEL_TB.fnReloadAjax();
})

$("#checked_all").click(function() {
    var state = $("#checked_all").prop("checked");
    if(state == true) {
        $(".checked_per_pro").prop("checked", "checked");
    } else {
        $(".checked_per_pro").prop("checked", "");
    }
});

//删除选中的记录
function del(){
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
	//删除选中的记录
	var toDel =""
	 $('input[name="checked_per_pro"]:checked').each(function(){
		 if(toDel ==""){
			 toDel = $(this).val()
		 }
		 else{
			 toDel = toDel +","+ $(this).val()
		 }
	});
	if(toDel==""){
		$('#alertModel').modal('show');
		$('.Alertmessage').html('请选中要删除的记录')
		return;
	}else{
		var msg="注意！！\r\n\n此操作将把所选记录彻底删除";
		msg+="\r\n\n确定删除所选记录？";
		var url="phoneBookDel"
		if(confirm(msg)){
			$.ajax({
				type:"POST",
				url:url,
				data:{
					phoneBookID:toDel
				},
				success: function(data){
					$('#alertModel').modal('show');
					$('.Alertmessage').html(data.message)
		   		    $('#alertModel').modal('hide');
		   		    alert(data.message)
		   		    window.location.reload()
				}
			})
		}
	}


}

$('.downloadPhone').click(function(){
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
		$('#alertModel').modal('show');
		$('.downloadName').css("display","none");
		var url="downloadPhoneExcel"
		var Items
		$.ajax({
			type:"POST",
			url:url,
			data:{
				strID:Items
			},
			beforeSend:function(XMLHttpRequest){
				$('.loadEffect').css("display","block");
			},
			success: function(data){
				console.log(data)
				$('.loadEffect').css("display","none");
				$('.downloadName').css("display","block");
				$('.modal-title').html("操作完成");
				$('.Alertmessage').html("成功生成号簿文件：<a href='"+data.data+"'>点击下载</a>")
			}
		})
})

$('.downloadVCardPhone').click(function(){
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
	$('#alertModel').modal('show');
	$('.downloadName').css("display","none");
	var url="downloadPhoneVCard"
	var Items
	$.ajax({
		type:"POST",
		url:url,
		data:{
			strID:Items
		},
		beforeSend:function(XMLHttpRequest){
			$('.loadEffect').css("display","block");
		},
		success: function(data){
			$('.loadEffect').css("display","none");
			$('.downloadName').css("display","block");
			$('.modal-title').html("操作完成");
			$('.Alertmessage').html("成功生成号簿文件：<a href='"+data.data+"'>点击下载</a>")
		}
	})
})

$('.tongbuPhone').click(function(){
		$('#alertModel').modal('show');
		$('.downloadName').css("display","none");
		var url="synPhoneBook"
		var Items
		$.ajax({
			type:"POST",
			url:url,

			beforeSend:function(XMLHttpRequest){
				$('.loadEffect').css("display","block");
			},
			success: function(data){
				console.log(data)
				$('.loadEffect').css("display","none");
				$('.downloadName').css("display","block");
				$('.modal-title').html("操作完成");
				$('.Alertmessage').html("号簿同步成功")
			}
		})
	})

function add(){
	var canManage = "{$canManage}";
	if(canManage == 0){
		$('#alertModel2').modal('show');
		$('.Alertmessage').html('没有管理权限，请联系管理员')
		return;
	}
	window.location.href="/home/Account/batchUpload";
}
</script>



    </body>
</html>
